<template>
  <div class="shop-around">
    <!-- 导航栏 -->
    <van-nav-bar title="周边店铺" left-arrow @click-left="$router.back()" />
    <!-- 搜索栏 -->
    <hr />
    <van-search show-action placeholder="搜索店铺" @search="onSearch">
      <template #action>
        <a href="http://localhost:8080/#/applyOpenStore">申请开店</a>
        <span>|</span>
        <a href="http://localhost:8080/#/promotion">推广赚钱</a>
      </template>
    </van-search>

    <!-- 类别区域 -->
    <van-dropdown-menu>
      <van-dropdown-item active-color="#e70201" v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" title="距离" :options="option2"></van-dropdown-item>
      <van-dropdown-item v-model="value2" :options="option3" />
      <van-dropdown-item v-model="value2" :options="option4" />
    </van-dropdown-menu>

    <!-- 店铺展示 -->
    <!-- 店铺1 -->
    <van-cell title="新佳宜1" value="内容" name="arrow-down" label="56426485"></van-cell>
    <!-- 店铺2 -->
    <van-cell title="新佳宜2" value="内容" icon label="56426485"></van-cell>
    <!-- 店铺2 -->
    <van-cell title="新佳宜3" value="内容" icon label="56426485"></van-cell>
    <!-- <template #tags> -->
    <!-- <van-tag plain type="">定时秒杀</van-tag> -->
    <!-- </template> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      value1: 0,
      value2: 'a',
      option1: [
        { text: '长沙', value: 0 },
        { text: '长沙1', value: 1 },
        { text: '长沙2', value: 2 }
      ],
      option2: [
        { text: '距离最近', value: 'a' },
        { text: '距离最远', value: 'b' }
      ],
      option3: [
        { text: '活动', value: 'a' },
        { text: '定时秒杀', value: 'b' },
        { text: '打折促销', value: 'c' },
        { text: '临保商品', value: 'd' }
      ],
      option4: [
        { text: '行业', value: 'a' },
        { text: '芙蓉兴盛', value: 'b' },
        { text: '新佳宜', value: 'c' }
      ]
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    onSearch () {
    }
  }
}
</script>

<style scoped lang="less">
.shop-around {
  // .van-card {
  //   background-color: #fff;
  //   border-width: 1px;
  //   border-style: solid none;
  //   border-color: #323233;
  // }
  .van-cell {
    .van-icon__image {
      width: 100px;
      height: 100px;
      border: 2px solid #323233;
      border-radius: 50%;
    }
  }
}
.van-tag {
  border-radius: none;
}
// .van-field__body{
//   // .van-field__control{

//   // }
// }
</style>
